<%--
  Created by IntelliJ IDEA.
  User: meng
  Date: 2020/5/30
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>级联选择器</title>

    <style type="text/css">
        .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .clearfix{zoom:1}ul,li{list-style:none}
        .qrm-input{outline:0;border:0;height:38px;position:absolute;left:4px;top:0;padding:0 10px}
        .qrm-input-border{position:relative}
        .qrm-pinming{
            height:38px;line-height:40px;border:1px solid #ddd;border-radius:5px;position:relative;
            width:300px;background-image:url(<%=path%>/static/images/web/qrm-arrow-down.png);background-repeat:no-repeat;
            background-position:275px
        }
        .qrm-pinming:hover{cursor:pointer}.qrm-pinming input:hover{cursor:pointer}
        .qrm-pinming-panel{
            position:absolute;top:52px;left:-1px;z-index:99999;width:350px;height:210px;background:#fff
        }
        .qrm-border1{
            float:left;width:33%;height:auto;border-right:1px solid #f1f1f1;position:absolute;top:50px;
            overflow: auto;max-height: 400px;
        }
        .qrm-border2{
            float:left;width:33%;border-right:1px solid #f1f1f1;position:absolute;top:50px;left:100px;
            background-color:#efefef;overflow: auto;max-height: 400px;
        }
        .qrm-border3{float:left;width:33%;border-right:1px solid #f1f1f1;background-color:#efefef;
            position:absolute;top:50px;left:200px;overflow: auto;max-height: 400px;
        }
        .qrm-lev{float:left;width:96.5%;margin:0;padding:0;font-size:12px}
        .qrm-lev>li{width:95%;position:relative;display:block;padding-left:10px;height:35px;line-height:35px}
        .qrm-lev>li:hover{background:#4471d6;color:#fff}
        .qrm-arrow-right{display:inline-block;width:4px;height:7px;
            background:url(<%=path%>/static/images/web/qrm-arrow-right.png) no-repeat;position:absolute;right:7px;top:14px}
        .qrm-lev-1>li.active{background:#4471d6;color:#fff}
        .qrm-lev-2>li.active{background:#4471d6;color:#fff}
        .qrm-lev-3>li.active{background:#4471d6;color:#fff}
        .qrm-lev-4>li.active{background:#4471d6;color:#fff}
        .box{width:350px;height:300px;margin:0 auto}
    </style>
</head>
<body>

<div class="box">
    <div class="qrm-pinming">
        <div class="qrm-input-border">

            <input type="text" placeholder="请选择" class="qrm-input" style="width: 250px">
        </div>

        <div class="qrm-border1" style="display:none;">
            <ul class="qrm-lev-1 qrm-lev">
            <c:forEach items="${requestScope.industries}" var="industrys" varStatus="x">
                <li class="active">
                    <span id="industry${industrys.id}">${industrys.industryName}</span><i class="qrm-arrow-right"></i>
                    <ul class="li-zi-1" style="display: none;">

                    <c:forEach items="${requestScope.positionTypeMap[industrys.id]}" var="positionType" varStatus="y">
                        <li>
                            <span id="positionType${positionType.id}">${positionType.positionTypeName}</span><i class="qrm-arrow-right"></i>
                            <ul class="li-zi-2" style="display: none">
                            <c:forEach items="${requestScope.positionMap[positionType.id]}" var="position" varStatus="z">
                                <li>
                                    <span id="position${position.id}">${position.positionName}</span>
                                </li>
                            </c:forEach>
                            </ul>
                        </li>
                    </c:forEach>

                    </ul>
                </li>
            </c:forEach>
            </ul>
        </div>
        <div class="qrm-border2" style="display:none">
            <ul class="qrm-lev-2 qrm-lev">
            </ul>
        </div>
        <div class="qrm-border3" style="display:none">
            <ul class="qrm-lev-3 qrm-lev">
            </ul>
        </div>
        <div class="qrm-border4" style="display:none">
            <ul class="qrm-lev-4 qrm-lev">
            </ul>
        </div>
    </div>
</div>

<script src="<%=path%>/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".qrm-input-border").click(function(){
            if($(".qrm-pinming").css("background-image").indexOf("qrm-arrow-down")!==-1){
                if($(".qrm-input").val()==''){
                    $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-right.png)");
                    $(".qrm-pinming").css("border","1px solid #409EFF");
                    $(".qrm-border1").show();
                }
                else{
                    var s=$(".qrm-input").val()
                    console.log(s)
                    var n=(s.split('/')).length-1;console.log(n)
                    if(n==1){
                        $(".qrm-border1").show();$(".qrm-border2").show();
                    }
                    else if(n==2){
                        $(".qrm-border1").show();$(".qrm-border2").show();$(".qrm-border3").show();
                    }
                    $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-right.png)");
                    $(".qrm-pinming").css("border","1px solid #409EFF");
                }
            }
            else{
                $(".qrm-border1").hide();$(".qrm-border2").hide();$(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            }
        });
        var lev1;var lev2;var lev3;var lev4;
        $("body").on("click",".qrm-lev-1>li",function(){
            $(this).addClass("active").siblings("li").removeClass("active");
            lev1="";lev2="";lev3="";lev4="";
            var html1=$(this).children(".li-zi-1").html();$(".qrm-lev-2").html(html1);$(".qrm-border2").show();
            $(".qrm-border3").hide();$(".qrm-lev-3").html("");lev1=$(this).children("span").html();
        });
        $("body").on("click",".qrm-lev-2>li",function(){
            $(this).addClass("active").siblings("li").removeClass("active");
            if($(this).children(".li-zi-2").html()==undefined){
                lev2=$(this).children("span").html();$(".qrm-input").val(lev1+"/"+lev2);$(".qrm-border1").hide();
                $(".qrm-border2").hide();$(".qrm-border3").hide();$(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            }
            else{
                var html2=$(this).children(".li-zi-2").html();lev2=$(this).children("span").html();
                $(".qrm-border3").show();$(".qrm-lev-3").html(html2);
            }
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                $(".qrm-border1").hide();$(".qrm-border2").hide();$(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            }
        });
        $("body").on("click",".qrm-lev-3>li",function(){
            $(this).addClass("active").siblings("li").removeClass("active");
            var html3=$(this).children(".li-zi-3").html();lev3=$(this).children("span").html();
            $(".qrm-input").val(lev1+"/"+lev2+"/"+lev3);$(".qrm-border1").hide();$(".qrm-border2").hide();
            $(".qrm-border3").hide();$(".qrm-pinming").css("border","1px solid #ddd");
            $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                $(".qrm-input").val(lev1+"/"+lev2);$(".qrm-border1").hide();$(".qrm-border2").hide();
                $(".qrm-border3").hide();$(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            }
        });
        $("body").on("click",".qrm-lev>li",function(){
            if($(this).parent().parent().next().children(".qrm-lev").html()==""){
                $(".qrm-border1").hide();$(".qrm-border2").hide();$(".qrm-border3").hide();
                $(".qrm-pinming").css("border","1px solid #ddd");
                $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
            }
        })
    });
    $(document).click(function(event){
        var x1=$('.box');if(!x1.is(event.target)&&x1.has(event.target).length===0){
            $(".qrm-border1").hide();$(".qrm-border2").hide();$(".qrm-border3").hide();
            $(".qrm-pinming").css("border","1px solid #ddd");
            $(".qrm-pinming").css("background-image","url(<%=path%>/static/ceshi/images/qrm-arrow-down.png)");
        }
    });
</script>
</body>
</html>
